<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type=text/javascript src="../vue.js"></script>
		<script type=text/javascript src="../vuex.js"></script>
	</head>
	<body>
		<div id="app">
			<child :model-value='"test"' :cname="'xy'"></child>
		</div>
		<script>
		
		const {h, ref, computed, onMounted, reactive} = Vue;
		const {createStore, mapGetters} = Vuex;
		
		// 创建一个新的 store 实例
		const store = createStore({
		  state: {
		    todos: [
		      { id: 1, text: 'xxxx', done: true },
		      { id: 2, text: 'yyyy', done: false },
			  { id: 3, text: 'hhhh', done: true },
			  { id: 4, text: 'tttt', done: false }
		    ]
		  },
		  getters: {
		    doneTodos: (state) => {
		      return state.todos.filter(todo => todo.done)
		    },
			doneTodosCount (state,getters) {
			    return getters.doneTodos.length
			},
			getTodoById: (state) => (id) => {
			    return state.todos.find(todo => todo.id === id)
			}
		  }
		})
		
		const child = {
			props: ['modelValue','cname'],
			setup(props, { expose, emit }) {
			  console.log("props = ",props);
		      
			  onMounted(function tt(){
				  console.log("the child is onMounted");
			  })
			},
			methods:{
				handleClick:function() {
					console.log("store = ",store)
					console.log("store = ",this.$store)
					
					console.log(this.$store.getters)
				}
			},
			computed: {
				// 使用对象展开运算符将 getter 混入 computed 对象中
				...mapGetters([
				  'doneTodos',
				  'doneTodosCount',
				  'getTodoById'
				])   
			    
				
			},
			template:`<div @click="handleClick">{{modelValue}}</div>
			<div v-for="dos in doneTodos">{{dos.id}},{{dos.text}}</div>
			<div @click="handleClick">{{doneTodosCount}}</div>
			<div @click="handleClick">{{getTodoById(2)}}</div>`
		}
		
		const App = {
		    setup(){
		        // 为目标对象创建一个响应式对象
				onMounted(() => {
					console.log("the parent is onMounted");
					
				})
				
		        
		    },
			components:{
				child
			},
			methods:{
				
			}
		};
		const app = Vue.createApp(App);
		
		// 将 store 实例作为插件安装
	    app.use(store)
		app.mount('#app');
		
		
		</script>
	</body>
</html>
